<template>
  <view class="my-orders-page">
    <view v-if="cardOrders.length === 0" class="no-orders">
      暂无订单
    </view>

    <scroll-view scroll-y style="height: calc(100vh - 100rpx);">
      <view v-for="order in cardOrders" :key="order.id" class="order-item">
        <view class="order-row">
          <text class="label">卡名：</text>
          <text class="value">{{ order.cardName }}</text>
        </view>
        <view class="order-row">
          <text class="label">价格：</text>
          <text class="value">￥{{ order.price }}</text>
        </view>
        <view class="order-row">
          <text class="label">时间：</text>
          <text class="value">{{ order.time }}</text>
        </view>
        <view class="order-row">
          <text class="label">状态：</text>
          <text class="value">{{ order.status }}</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      user: uni.getStorageSync('xm-user') || {},
      cardOrders: []
    };
  },
  created() {
    this.loadCardOrders();
  },
  methods: {
    loadCardOrders() {
      if (!this.user.id) {
        uni.showToast({title: '未登录', icon: 'none'});
        return;
      }
      this.$request.get('/cardOrder/selectAll', {
        userId: this.user.id,
      }).then(res => {
        if (res.code === '200') {
          this.cardOrders = res.data || [];
        } else {
          uni.showToast({title: res.msg || '查询失败', icon: 'none'});
        }
      }).catch(err => {
        console.error('查询失败:', err);
        uni.showToast({title: '网络异常', icon: 'none'});
      });
    }
  }
};
</script>

<style scoped>
.my-orders-page {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding: 20rpx;
}

.header {
  height: 80rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #007aff;
  border-radius: 15rpx;
  margin-bottom: 20rpx;
}

.header-title {
  font-size: 32rpx;
  color: #fff;
  font-weight: bold;
}

.no-orders {
  text-align: center;
  color: #999;
  font-size: 28rpx;
  margin-top: 50rpx;
}

.order-item {
  background-color: #fff;
  padding: 25rpx;
  margin-bottom: 20rpx;
  border-radius: 15rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.order-row {
  display: flex;
  margin-bottom: 15rpx;
}

.label {
  font-weight: bold;
  width: 100rpx;
  color: #333;
}

.value {
  color: #666;
  flex: 1;
}
</style>
